<template>
	<view>
		<cu-custom bgColor="bg-white" :isBack="true">
			<block slot="backText"></block>
			<block slot="content">门店核销券</block>
		</cu-custom>
		<view class="bg02" :style="'background-image:url(' + imgurl + 'bg02.png)'">
			<view class="qui-cells qui-card bg-transparent  bg03" :style="'background-image:url(' + imgurl + 'bg03.png)'">
				<view class="qui-cell border_none">
					<view class="cell-hd" style="margin-right: 60upx;">
						<view class="fs38 fw600 text-main">
							￥
							<text class="ff fs70">{{data.CodeFace}}</text>
						</view>
					</view>
					<view class="cell-bd">
						<view class="fs32 fw600">{{data.Title}}</view>
						<view class="fs24 text-muted">{{data.MinStr}}</view>
						<view class="fs20 text-muted">{{data.Time}}</view>
					</view>
				</view>
				<view class="qui-cell">
					<view class="cell-bd">
						<view class="fs32 fw600 tc pt30"><image :src="'data:image/png;base64,' + data.QrCode" class="img230"></image></view>
						<view class="fs26 ff tc pb30" style="letter-spacing: 6rpx;">{{data.Code}}</view>
					</view>
				</view>
			</view>

			<view class="qui-cells qui-card">
				<navigator :url="'/pages/my/shop?codeId=' + codeId" class="qui-cell">
					<view class="cell-bd"><view class="fs26 fw600">核销门店</view></view>
					<view class="cell-ft"><view class="fs24" style="color: #ff5e1f;">更多</view></view>
				</navigator>
				<view class="qui-cell">
					<view class="cell-bd"><view class="fs30 fw600">{{data.ShopName}}</view></view>
					<view class="cell-ft">
						<view>
							<image :src="imgurl + '/icon_address.png'" class="img22 mr10"></image>
							<text class="fs22 text-gray">距您{{data.Distance}}m</text>
						</view>
					</view>
					<view class="arrow-r"></view>
				</view>
			</view>

			<view class="qui-cells qui-card" v-show="1 == 2">
				<view class="qui-cell">
					<view class="cell-bd">
						<picker @change="PickerChange" :value="index" :range="picker">
							<view class="picker fw600 fs26" style="text-align: left;">{{ index > -1 ? picker[index] : '适用商品' }}</view>
						</picker>
					</view>
					<view class="arrow-r"></view>
				</view>
			</view>

			<view class="qui-cells qui-card">
				<view class="qui-cell">
					<view class="cell-bd">
						<view class="fs26 fw600">使用说明</view>
						<view class="fs22 text-gray mt20">1、优惠券有使用期限限制，过了有效期不能使用；</view>
						<view class="fs22 text-gray">2、订单中包含特价商品时不能使用优惠券，优惠券不能与其他优惠（如促销活动）同时使用；</view>
						<view class="fs22 text-gray">3、优惠券只能抵扣订单金额，优惠金额超出订单金额部分不能再次使用，不能兑换现金；</view>
						<view class="fs22 text-gray">4、每个订单只能使用一张优惠券；</view>
						<view class="tc flex justify-center align-center mt30" style="background-color: #f6f6f6;">
							<view class="cell-ft fs20">展开全部</view>
							<view class="arrow-r"></view>
						</view>
					</view>
				</view>
			</view>
		</view>

		<view style="height: 100upx;">
			<view class=" fixedbtn flex  align-center">
				<view class="bor-1px-r">
					<image :src="imgurl + '/img01.png'" class="img30"></image>
					<text class="fs26 fw600">赠送好友</text>
				</view>
				<!-- <view style="color: #dedede;">|</view> -->
				<view>
					<image :src="imgurl + '/img02.png'" class="img30"></image>
					<text class="fs26 fw600">收藏到微信卡包</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import base from 'utils/base.js';
export default {
	data() {
		return {
			lng: 0,
			lat: 0,
			codeId:'',
			data:{},
			index: -1,
			picker: ['喵喵喵', '汪汪汪', '哼唧哼唧'],
			imgurl: this.$imgurl
		};
	},
	methods: {
		GetData(){
			var t = this;
			let params = {
				type: 'GET',
				url: '/api/Card/GetMemberCardDetails',
				data: {
					lng: t.lng,
					lat: t.lat,
					codeId: t.codeId
				},
				sCallback: function(response) {
					
					t.data = response.Data.Data;
				}
			};
			base.request(params);
		},
		PickerChange(e) {
			this.index = e.detail.value;
		}
	},
	onLoad(e) {		
		this.codeId = e.codeId;
		this.GetData();
	}
};
</script>

<style lang="scss">
.bg02 {
	background-size: 100%;
	background-repeat: no-repeat;
	padding-top: 5upx;
}

.img30 {
	width: 30upx;
	height: 30upx;
	position: relative;
	top: 5upx;
	margin-right: 10upx;
}

.bg03 {
	background-size: 100%;
	background-repeat: no-repeat;
}

.img230 {
	width: 230upx;
	height: 230upx;
}

.img22 {
	width: 22upx;
	height: 22upx;
}

.fixedbtn {
	position: fixed;
	height: 95upx;
	line-height: 95upx;
	box-shadow: 0px 0px 15upx 0px rgba(0, 0, 0, 0.05);
	background-color: #ffffff;
	bottom: 0;
	left: 0;
	right: 0;

	view {
		flex: 1;
		text-align: center;
	}
}
</style>
